<template>
  <div class="chart-line-memory-root" ref="ChartLineMemoryRef"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, inject } from "vue";
import { isNull } from "@/assets/utils/obj";
import { getMemoryLineApi } from "@/api/guardcat";
import * as jvmTheme from './JvmTheme';
// echarts
import * as echartTheme from '@/assets/styles/xz/echartTheme';
import * as echarts from 'echarts/core';
import { GridComponent, TooltipComponent, DataZoomComponent, LegendComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([GridComponent, TooltipComponent, DataZoomComponent, LegendComponent, LineChart, UniversalTransition, CanvasRenderer]);

// -------------------- inject
const currentMachine: any = inject('currentMachine');

// -------------------- data
const ChartLineMemoryRef = ref<any>(null);
let chartLineMemory: any;
let chartData = {
  x: [],
  use: [],
  ou: [],
  eu: [],
  metricName: ''
}

const getJvmMemoryLine = (field?: any) => {
  if (isNull(field)) {
    field = 'hu';
  }
  getMemoryLineApi({ machineId: currentMachine.value.machineId, useField: field }).then(resp => {
    chartData.x = resp.data.x;
    chartData.use = resp.data.use;
    chartData.ou = resp.data.ou;
    chartData.eu = resp.data.eu;
    chartData.metricName = resp.data.metricName;
    renderChart();
  });
}

const renderChart = () => {
  chartLineMemory.setOption({
    title: { right: 0, text: chartData.metricName, textStyle: echartTheme.title().textStyle },
    legend: echartTheme.legend(),
    grid: { left: 10, right: 20, bottom: 35, top: 30, containLabel: true },
    xAxis: { type: 'category', data: chartData.x.map((item: any) => item.replaceAll(' ', '\n')) },
    yAxis: { splitLine: { lineStyle: { color: [echartTheme.common().axisLineColor] } } },
    dataZoom: [{ ...echartTheme.dataZoom(), ...{ type: 'slider', height: 15, bottom: 15, start: 0, end: 100 }, }],
    tooltip: {
      ...echartTheme.tooltip(), ...{
        formatter: (params: any) => {
          let div = '<div>';
          div = div + '<span style="font-weight: 700;">' + params[0].name + '</span><br/>';
          params.forEach((e: any, index: number) => {
            if (e.data == 0)
              return;
            if (index == 0)
              div = div + '<span ' + jvmTheme.clr().heapLabelStyle + '>' + e.seriesName + '</span>: ' + e.data + ' mb<br/>';
            if (index == 1)
              div = div + '<span ' + jvmTheme.clr().oldLabelStyle + '>' + e.seriesName + '</span>: ' + e.data + ' mb<br/>';
            if (index == 2)
              div = div + '<span ' + jvmTheme.clr().edenLabelStyle + '>' + e.seriesName + '</span>: ' + e.data + ' mb<br/>';
          });
          return div + '</div>';
        }
      }
    },
    series: [
      {
        z: 1,
        id: "USE",
        name: '总内存',
        type: 'line',
        stack: 'Total',
        showSymbol: false,
        sampling: 'lttb',
        data: chartData.use,
        lineStyle: { width: 2 },
        itemStyle: { color: jvmTheme.clr().heap },
        areaStyle: { color: jvmTheme.clr().heap }
      },
      {
        z: 2,
        id: "老年代",
        name: '老年代',
        type: 'line',
        stack: 'Part',
        showSymbol: false,
        sampling: 'lttb',
        data: chartData.ou,
        lineStyle: { width: 1 },
        itemStyle: { color: jvmTheme.clr().oldLine },
        areaStyle: { color: jvmTheme.clr().old }
      },
      {
        z: 3,
        id: "新生代",
        name: '新生代',
        type: 'line',
        stack: 'Part',
        showSymbol: false,
        sampling: 'lttb',
        data: chartData.eu,
        lineStyle: { width: 1 },
        itemStyle: { color: jvmTheme.clr().edenLine },
        areaStyle: { color: jvmTheme.clr().eden }
      }
    ]
  });
}

const windowResize = () => {
  chartLineMemory.resize();
}

const init = () => {
  chartLineMemory = echarts.init(ChartLineMemoryRef.value);
}

onMounted(() => {
  init();
  windowResize();
})

defineExpose({
  windowResize, getJvmMemoryLine
})
</script>

<style scoped lang="scss">
.chart-line-memory-root {
  @include box(100%, 100%);
  ;
}
</style>